<template>
  <div class="dept-page">
    <breadcrumb />
    <div class="search-container">
      <Search :listData="listData" @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <Buttons @buttons="getButtonsParams" />
        <Table
          :tableData="table.data"
          :loading="table.loading"
          :flag="flag"
          @table="getTableParams"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      destroy-on-close
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="520px"
    >
      <component
        :is="componentTag"
        @operationDone="operationDone"
        :operationId="operationId"
        :listData="listData"
      >
      </component
    ></el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Buttons from "./components/buttons.vue";
import Table from "./components/table.vue";
import addComponent from "./components/addComponent.vue";
import editComponent from "./components/editComponent.vue";
import { getDeptList, getDeptTree, getEnabledAPi } from "./request.js";

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

const handleClose = () => {
  dialogVisible.value = false;
};

// 搜索
const searchModel = ref({});

const flag = ref(false)

// 搜索操作
const getSearchParams = (value) => {
  // searchParams.value = value;
  searchModel.value = value;
  getData();
};

// buttons按钮
const getButtonsParams = (value) => {
  // console.log(value);
  operationId.value = '';
  if (value == "add") {
    title.value = "新增部门";
    componentTag.value = addComponent;
  } else if (value == "flag") {
    flag.value = !flag.value;
    getData();
    // console.log(flag.value);
    return;
  }
  dialogVisible.value = true;
};

// table操作
const getTableParams = (value) => {
  console.log("value ===>", value);
  if (value.operation == "edit") {
    title.value = "编辑部门";
    componentTag.value = editComponent;
  } else if (value.operation == "status") {
    statusData(value);
    return;
  }else if(value.operation == "add"){
    title.value = "新增部门";
    componentTag.value = addComponent;
  }
  operationId.value = value;
  dialogVisible.value = true;
};

const statusData = (row) => {
  ElMessageBox.confirm(
    `您确认要${row.status == false ? "启用" : "停用"}部门（${row.name}）吗？`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      await getEnabledAPi({
        id: row.id,
        status: !row.status,
      }).then((res) => {
        if (res.data.code === 0) {
          ElMessage({
            type: "success",
            message: res.data.result,
          });
          getData();
        } else if (res.data.code === -1) {
          row.status = row.status === true ? false : true;
        }
      });
    })
    .catch(() => {
      row.status = row.status === true ? false : true;
    });
};

// 表格
const table = reactive({
  data: [],
  loading: true,
});

const getData = async () => {
  table.loading = true;
  await getDeptList({
    keyword: searchModel.value.keyword,
    status: searchModel.value.status,
  }).then((res) => {
    if (res.data.code === 0) {
      table.data = res.data.result;
      table.loading = false;
    }
  });
};

const listData = reactive({
  deptTreeList: [],
});

const init = async () => {
  await getDeptTree().then((res) => {
    listData.deptTreeList = res.data.result;
  });
};
getData();
init();
</script>

<style lang="less" scoped>
.dept-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;
    .table-component {
      .pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>
